<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <script src="./js/jQuery.mini.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./layui.main/dist/layui.js"></script>
    <link rel="stylesheet" href="./layui.main/dist/css/layui.css">
    <script src="./js/index.js"></script>
    <title>Document</title>

</head>

<body>
    <div class="title">
        <div class="title-left">
            <h2>
                <%= title[0].title %>
            </h2>

        </div>
        <div class="title-right">

            <!-- 放大后的导航栏 -->
            <ul id="title-right-nav">
                <% header.forEach(item=> { %>
                    <li>
                        <i class="<%= item.icon %>"></i>
                        <span>
                            <%= item.name %>
                        </span>
                    </li>
                    <% }) %>
            </ul>
        </div>
        <div class="caida">
            <img src="./img/caida.png" alt="" id="caidaBtn">
            <div class="neir">
                <!-- 缩小后的导航栏 -->
                <ul id="caida-nav">
                    <% header.forEach(item=> { %>
                        <li><span class="<%= item.icon %>"></span>
                            <%= item.name %>
                        </li>
                        <% }) %>
                </ul>

            </div>
        </div>
        <div id="tcdl">
            <div class="tcdl-tx">
                <img src="<%= img %>" alt="">
            </div>
            <span class="tcdl-tcdl">退出登录</span>
            <span class="tcdl-dl" style="display: none;">登录</span>
        </div>
    </div>

    <div class="box w">
        <div class="box-left">

            <!-- 内容 -->
            <div style="margin:auto;width:830px;">
            </div>
            <div class="lanren">
                <div class="hidden">
                    <ul id="box-left-ul">
                        <% artcate.forEach((item,i)=> { %>
                            <li class="box-left-ul-li">
                                <h2 class="box-left-ul-h2" index=<%=item.id %>>
                                    <%= item.title %>
                                </h2>
                               

                                <span class="fwl"><img src="/img/yj.png" alt="">
                                    <%= item.visit %>
                                </span>
                                <div id="biaoqian">
                                    <% if (item.tag!==null) { %>
                                        <img src="/img/bq.png" alt="">
                                        <% } %>

                                            <a href="#" id="<%= item.id %>" class="Rerender" onclick="re(event)">
                                                <%= item.tag %>
                                            </a>
                                </div>

                                <span style="display: none;">/?,</span> <!-- 分割 -->

                                <div class="box-left-neir">
                                    <span>内容：</span>
                                    <%= item.content %>
                                </div>

                                <span style="display: none;">/?,</span> <!-- 分割 -->

                                <div class="li_bottom">
                                    <span class="s-left">作者：<%= item.author %></span>

                                    <span style="display: none;">/?,</span> <!-- 分割 -->

                                    <span class="s-right">时间：<%= item.time %></span>

                                </div>

                            </li>
                            <% }) %>
                    </ul>
                </div>

                <!-- 数据加载 -->
                <!-- <ul class="list">数据加载中，请稍后...</ul>
                <div class="more"><a href="javascript:;" onClick="javascript:loadMore();">加载更多...</a></div> -->
            </div>
        </div>


        <div class="box-right">

            <!-- 个人信息 -->
            <ul>
                <li class="li">
                    <h4 style="font-weight: bolder;">个人信息</h4>
                    <div class="icon"><img src="<%= img %>" alt=""></div>
                    <h3 style="width: 100%; text-align: center; font-weight: bolder; margin-bottom: 5px;">
                        <%= username %>
                    </h3>
                    <div class="box2">
                        <div>
                            文章
                            <div>
                                <%= wz %>
                            </div>
                        </div>
                        <div>
                            标签
                            <div>
                                <%= tag %>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>

            <!-- 最新文章 -->
            <ul>
                <li class="li" id="zxwz">
                    <div class="wz-title">
                        <h4>最新信息</h4>
                    </div>
                    <div class="box3">
                        <% artcate.forEach((item,i)=> { %>
                            <div class="box3-x" index=<%=item.id %>>

                                <!-- 标题 -->
                                <h2>
                                    <%= item.title %>
                                </h2>

                                <span style="display: none;">/?,</span> <!-- 分割 -->
                                <div class="box3-x-fwl">
                                    <!-- 访问量 -->
                                    <div class="box3-x-fwl-tp">
                                        <img src="/img/yj.png" alt="">

                                    </div>
                                    <span>
                                        <%= item.visit %>
                                    </span>
                                </div>

                                <span style="display: none;">/?,</span> <!-- 分割 -->


                                <!-- 内容 -->
                                <div class="neiro">
                                    <%= item.content %>
                                </div>
                                <span style="display: none;">/?,</span> <!-- 分割 -->
                                <!-- 时间 -->
                                <div class="zx-time">
                                    <%= item.time %>
                                </div>
                            </div>
                            <% }) %>
                    </div>
                </li>
            </ul>


            <!-- 返回顶层 -->
            <div id="fahui">
                <span class="iconfont icon-shengdanfanhuidingbu"></span>
            </div>

            <!-- 表单弹出层 -->
            <div class="site-text" style="margin: 5%; display: none" id="window" target="test123">
                <form class="layui-form" id="book" method="post" lay-filter="example">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题：</label>
                        <div class="layui-input-block">
                            <input type="text" id="title" name="title" lay-verify="title" autocomplete="off"
                                autofocus="autofocus" placeholder="请输入标题" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">内容：</label>
                        <div class="layui-input-block">
                            <textarea name="content" id="content" cols="30" rows="10" placeholder="请输入内容"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">作者：</label>
                        <div class="layui-input-block">
                            <input type="text" id="author" name="author" lay-verify="title" autocomplete="off"
                                placeholder="请输入作者" class="layui-input">
                        </div>
                    </div>
                </form>
            </div>
        </div>


    </div>

</body>


</html>

<script>
    function re(e) {
        let tag = e.target.innerHTML;
        tag = tag.replace(/^\s+|\s+$/g, "");

        $.post('/api/Re-render', { tag: tag }, function (res) {
            $("#box-left-ul").empty("");
            res.data.map((item) => {
                if (item.category === null) {
                    item.category = "未分类";
                }
                let a = `<a href="">
                        <li  class="box-left-ul-li">
                            <h2 index=${item.id}>
                                ${item.title}
                            </h2>
                            <span style="display: none;">/?,</span> <!-- 分割 -->
                            <span class="fwl"><img src="/img/yj.png" alt="">
                                ${item.visit}
                                    <a href="#" id="${item.id}" class="Rerender">
                                        <img src="/img/bq.png" alt="" class="Rerender-img">
                                        ${item.tag}
                                    </a>
                            </span>
                            <span style="display: none;">/?,</span> <!-- 分割 -->
                            <div class="box-left-neir">
                                <span>内容：</span>
                                ${item.content}
                            </div>
                            <span style="display: none;">/?,</span> <!-- 分割 -->
                            <div class="li_bottom">
                                <span class="s-left">作者：${item.author}</span>
                                <span style="display: none;">/?,</span> <!-- 分割 -->
                                <span class="s-right">时间：${item.time}</span>
                            </div>
                        </li>
                    </a>`;
                $("#box-left-ul").append(a);
            });
        })
    }

    // 加载更多
    // var _default = 4; //默认显示图片个数
    // var _loading = 1; //每次点击按钮后加载的个数
    // var _content = [];//用来存储li循环内容

    // function init() {
    //     var lis = $(" .hidden li");
    //     $(" ul.list").html("");
    //     for (var n = 0; n < _default; n++) {
    //         lis.eq(n).appendTo(" ul.list");
    //     }
    //     for (var i = _default; i < lis.length; i++) {
    //         _content.push(lis.eq(i));
    //     }
    //     $(" .hidden").html("");
    // }
    // init();


    // function loadMore() {
    //     var k = 0, t, i;
    //     var mLis = $(" ul.list li").length;
    //     for (i = mLis - _default; i < mLis - _loading; i++) {
    //         if (i == _content.length) {
    //             $(' .more').html("<p>全部加载完毕...</p>");
    //             break;
    //         }
    //         _content[i].appendTo("ul.list");
    //         t = mLis + k;
    //         k++;
    //     }
    // }

</script>